<template>
	<view class="tournament">
		<view class="item" v-for="(v,i) in list" :key="i" @click="goDeatail(v)">
			<image class="cover" :src="v.cover" mode="scaleToFill"></image>
			<view class="right">
				<view class="item1">
					<text class="title">{{v.title}}</text>

					<text v-if="v.thenTime > v.endTime" class="t2">已结束</text>
					<text v-else-if="v.thenTime < v.startTime" class="t2">未开始</text>
					<text v-else class="t1">进行中</text>
				</view>
				<view class="item2">
					<image src="https://yijili.oss-cn-beijing.aliyuncs.com/pool/Time.png" mode="scaleToFill"></image>
					<text>{{v.start_time}}</text>
				</view>
				<view class="item2">
					<image src="https://yijili.oss-cn-beijing.aliyuncs.com/pool/Local.png" mode="scaleToFill"></image>
					<text class="address">{{v.address}}</text>
				</view>
				<view v-if="false" class="item3">
					<view class="left">
						<image :src="v.admin.avatarUrl" mode="scaleToFill">
						</image>
						<text>{{v.admin.agent_name}}</text>
					</view>
					<view class="price">
						￥{{v.group.price || "免费"}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				list: [],
				total: 0
			}
		},
		onLoad() {
			this.getData();
		},
		methods: {
			async getData() {
				let res = await this.$api.activity.getActivityList({
					page: this.page
				})
				// console.log(res);
				res.data.map(v => {
					v.startTime = new Date(v.start_time).getTime();
					v.endTime = new Date(v.end_time).getTime();
					v.thenTime = new Date().getTime();
				})
				this.list = this.list.concat(res.data)
				this.total = res.total
				console.log(this.list);
			},
			goDeatail(item) { // 前往详情页
				this.$util.goUrl({
					url: `/pages/activity/detail?id=${item.id}`
				})
			},
		},
		onReachBottom() {
			if (this.list.length >= this.total) return
			this.page += 1
			this.getData()
		}
	}
</script>

<style lang="scss" scoped>
	.tournament {
		width: 100vw;
		min-height: 100vh;
		background: url("https://yijili.oss-cn-beijing.aliyuncs.com/pool/tournamentBack.png") no-repeat;
		background-size: 100% auto;
		background-color: #ffffff;
		padding: 16rpx 24rpx;

		.item {
			display: flex;
			// width: 702rpx;
			height: 264rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.08);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin-bottom: 24rpx;
			padding: 24rpx;

			.cover {
				width: 314rpx;
				height: 216rpx;
			}

			.right {
				flex: 1;
				margin-left: 24rpx;

				.item1 {
					margin-bottom: 16rpx;

					.title {
						font-weight: bold;
						font-size: 32rpx;
						color: #333333;
						margin-right: 10rpx;
						word-break: break-all;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}

					.t1 {
						display: inline-flex;
						align-items: center;
						justify-content: center;
						font-weight: bold;
						font-size: 24rpx;
						color: #FFFFFF;
						width: 92rpx;
						height: 36rpx;
						background: linear-gradient(270deg, #8BD4B0 0%, #8DE5B7 100%);
						border-radius: 58rpx 58rpx 58rpx 58rpx;
					}

					.t2 {
						display: inline-flex;
						align-items: center;
						justify-content: center;
						font-weight: bold;
						font-size: 24rpx;
						color: #FFFFFF;
						width: 92rpx;
						height: 36rpx;
						background: linear-gradient(270deg, #A6A6A6 0%, #D5D5D5 100%);
						border-radius: 58rpx 58rpx 58rpx 58rpx;
					}
				}

				.item2 {
					display: flex;
					align-items: center;
					margin-bottom: 8rpx;

					image {
						width: 28rpx;
						height: 28rpx;
						margin-right: 8rpx;
					}

					text {
						font-weight: bold;
						font-size: 24rpx;
						color: #ACACAC;
						line-height: 32rpx;
					}
					.address{
						width: 200rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.item3 {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						display: flex;
						align-items: center;
						margin-bottom: 8rpx;

						image {
							width: 28rpx;
							height: 28rpx;
							border-radius: 50%;
							margin-right: 8rpx;
						}

						text {
							font-weight: bold;
							font-size: 24rpx;
							color: #ACACAC;
							line-height: 32rpx;
						}
					}

					.price {
						font-weight: bold;
						font-size: 28rpx;
						color: #EF0F0F;
					}
				}
			}
		}
	}
</style>